<template>
  <section id="help">
    <div class="info_title">我的&nbsp;&gt;&nbsp;帮助中心</div>
    <div class="content clearfix">
      <div class="list pull_left">
        <a href="javascript:;" class="item" v-for="(item,index) in list.data" :key="index" :class="index === tabIndex && 'active'" @click="tabIndex=index">
        {{item.name}}</a>
      </div>
      <div class="detail pull_right">
        <ul v-if="listData&&listData.length">
          <li v-for="(item,index) in listData[tabIndex].data" :key="index" :class="index == rightIndex[tabIndex] && 'active'">
            <div class="title" @click="index == rightIndex[tabIndex]?rightIndex.splice(tabIndex,1,-1):  rightIndex.splice(tabIndex,1,index)">
              <span>{{index+1}}.{{item.title}}</span>
              <span>
                <img src="../../assets/image/icon_zhankai_normal.png" alt="" width="10" v-if="index == rightIndex[tabIndex]">
                <img src="../../assets/image/icon_xiala.png" alt="" width="10" v-else>
              </span>
            </div>
            <div class="detail_content" v-if="index ==rightIndex[tabIndex]">
              {{item.content}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>
<script>
import {_getHelpList,_getHelpTypeList} from '@/axios/index.js'
export default {
  data() {
    return {
      tabIndex:0,
      rightIndex:[0,0,0,0,0,0],
      list:[
        {
          id:1,
          name:'投资入门'
        },
        {
          id:2,
          name:'投资进阶'
        },
        {
          id:3,
          name:'投资高手'
        },
        {
          id:4,
          name:'账户问题'
        },
        {
          id:5,
          name:'交易问题'
        },
        {
          id:6,
          name:'出入金问题'
        },
      ],
      listRight:[
        {
          name:'外汇品种以及标志符号',
          desc:'外汇品种即标志符号，按照国际惯例，通常用三个英文字母来表示货币的名称。美元=USD英镑=GBP  欧元=EUR  日元=JPY  瑞士法郎=CHF  澳大利元=AUD  加拿大元=CAD外汇交易市场中货币对值由两种货币组成的外汇交易汇率，外汇交易市场中货币对值由两种货币组成的外汇交易汇率。'
        },
        {
          name:'外汇交易时间',
          desc:'外汇品种即标志符号，按照国际惯例，通常用三个英文字母来表示货币的名称。美元=USD英镑=GBP  欧元=EUR  日元=JPY  瑞士法郎=CHF  澳大利元=AUD  加拿大元=CAD外汇交易市场中货币对值由两种货币组成的外汇交易汇率，外汇交易市场中货币对值由两种货币组成的外汇交易汇率。'
        },
        {
          name:' 外汇交易的盈可计算',
          desc:'外汇品种即标志符号，按照国际惯例，通常用三个英文字母来表示货币的名称。美元=USD英镑=GBP  欧元=EUR  日元=JPY  瑞士法郎=CHF  澳大利元=AUD  加拿大元=CAD外汇交易市场中货币对值由两种货币组成的外汇交易汇率，外汇交易市场中货币对值由两种货币组成的外汇交易汇率。'
        },
        {
          name:'外汇保证金',
          desc:'外汇品种即标志符号，按照国际惯例，通常用三个英文字母来表示货币的名称。美元=USD英镑=GBP  欧元=EUR  日元=JPY  瑞士法郎=CHF  澳大利元=AUD  加拿大元=CAD外汇交易市场中货币对值由两种货币组成的外汇交易汇率，外汇交易市场中货币对值由两种货币组成的外汇交易汇率。'
        },
        {
          name:'隔夜利息',
          desc:'外汇品种即标志符号，按照国际惯例，通常用三个英文字母来表示货币的名称。美元=USD英镑=GBP  欧元=EUR  日元=JPY  瑞士法郎=CHF  澳大利元=AUD  加拿大元=CAD外汇交易市场中货币对值由两种货币组成的外汇交易汇率，外汇交易市场中货币对值由两种货币组成的外汇交易汇率。'
        }
      ],
      listData:[]
    }
  },
  methods: {
   
    async getData(){
      var _self=this;
      var res=await _getHelpTypeList()
      if(res.data.code==200){
        _self.list=res.data.data;
        for (let i = 0; i < this.list.data.length; i++) {
                _self.getData2(this.list.data[i].id);
            }
      }
    },
    async getData2(id){
         var _self=this;
      var res=await _getHelpList(id,1,10)
      if(res.data.code==200){
        this.listData.push(res.data.data);
      }
    }
  },
  created() {
  
    this.getData();
  },
  destroyed() {
   
  }
}
</script>
